import React, { PropTypes } from 'react';
import { ListView } from 'antd-mobile';
import { hashHistory} from 'react-router';
import request from '../../../utils/request';
import './less/index.less';

const propTypes = {
    data: PropTypes.array.isRequired,
};

let NUM_SECTIONS = 0;
const NUM_ROWS_PER_SECTION = 1;
let pageIndex = 0;

const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];
function genData(pIndex = 0) {

    for (let i = 0; i < NUM_SECTIONS; i++) {
        const ii = (pIndex * NUM_SECTIONS) + i;
        const sectionName = `Section ${ii}`;
        sectionIDs.push(sectionName);
        dataBlobs[sectionName] = sectionName;
        rowIDs[ii] = [];

        for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
            const rowName = `S${ii}, R${jj}`;
            rowIDs[ii].push(rowName);
            dataBlobs[rowName] = rowName;
        }
    }
    sectionIDs = [...sectionIDs];
    rowIDs = [...rowIDs];
}

class CellItem extends React.Component {
    constructor(props) {
        super(props);
        NUM_SECTIONS = this.props.data.length;
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight * 3 / 4,
        };
    }

    componentDidMount() {
        // you can scroll to the specified position
        // setTimeout(() => this.lv.scrollTo(0, 120), 800);
        sectionIDs = [];
        rowIDs = [];
        const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
        // simulate initial Ajax
        setTimeout(() => {
            genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
                isLoading: false,
                height: hei,
            });
        }, 600);
    }
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
    }

    goodsDetail = (goodsId,e) => {
        sessionStorage.setItem("selectTab","mallTab");
        console.log(goodsId);
        hashHistory.push({
            pathname: '/goodsDetails',
            state:goodsId
        })
    }

    render() {
        let index = this.props.data.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = this.props.data.length - 1;
            }
            const obj = this.props.data[index--];
            return (
                <div key={rowID} style={{ padding: '0 15px' }}>
                    <div className="line"></div>
                    <div className="cell" onClick={this.goodsDetail.bind(this,obj.id)}>
                        <img src={obj.icon} alt="" />
                        <div className="cellContent">
                            <div  className="lineLimit cellDesc cellCommom">{obj.name}</div>
                            <div style={{marginTop:'40px'}} className="cellCommom">
                                <div className="textPosition">
                                    <span style={{ fontSize: '28px', color: '#FF6E27' }}>¥ {obj.price}</span>
                                </div>
                                <div className="textPosition">
                                    <span style={{ fontSize: '24px', color: '#bdbdc6',marginLeft:'180px' }}>销量 {obj.sellerNum}   |   已分销 {obj.distributorNum} </span>
                                </div>
                            </div>
                            <div style={{textAlign:'left',marginLeft:'240px',marginTop:'100px'}}>
                                <span style={{ fontSize: '24px', color: '#bdbdc6' }}>店铺名称 </span>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

        return (
            <ListView
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 10, textAlign: 'center',marginBottom:'90px' }}>
                    {this.state.isLoading ? '正在加载中...' : '没有更多了～'}
                </div>)}
                renderRow={row}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                scrollRenderAheadDistance={50}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={10}
            />
        );
    }
}

CellItem.propTypes = propTypes;

export default CellItem;